<template>
    <div class="meowBlog">
        <div class="main-container">
            <div class="container">
                <div class="row">
                    <div class="entry-blog animated zoomIn" v-for="(item, index) in ArticleList" :key="index">
                        <div class="left_img" @click="_JumpDetails(item)">
                            <img :src="item.imgUrl" alt="">
                        </div>
                        <div class="right_container">
                            <div class="post-content">
                                <div class="post-header">
                                    <span class="category-meta">
                                        <a href="jacascript::void(0)"><b class="iconfont icon-icon--"></b>{{item.classname}}</a>
                                    </span>
                                    <h4 class="category-title" @click="_JumpDetails(item)">{{item.title}}</h4>
                                </div>
                                <div class="author-box">
                                    <div class="author_headimg">
                                        <img :src="require('@/assets/imgs/author_headimg.png')" alt="">
                                    </div>
                                    <div class="post_meta_content">
                                        <p class="post_time"><b class="iconfont icon-rili"></b>{{item.pushTime}}</p>
                                        <div class="post_author">
                                            <span><b class="iconfont icon-touxiang-shi"></b> {{item.userName}}</span>
                                            <span><b class="iconfont icon-pinglun3-copy"></b>评论（{{item.count}}） </span>
                                            <span><b class="iconfont icon-yuedu"></b>{{item.lookUp}} VIEWS</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="post_intro_text">
                                    <p>{{item.content}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {getAllArticle} from 'api/article'

export default {
    props:{
        ArticleList: Array
    },
    data(){
        return {
            
        }
    },
    methods:{
        _JumpDetails(item){
            this.$emit("JumpDetails", item);
        },
    },
}
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1025px){
    .container .row .entry-blog .right_container .post-content .author-box .post_meta_content{
        line-height: 0.5rem !important;
    }
}
@media screen and (max-width: 1025px){
    .container{
        width: 100% !important;
        padding: 0.25rem 0.25rem !important;
    }
}
@media screen and (max-width: 752px){
    .container .row .entry-blog{
        flex-direction: column;
        padding: 0.4rem 0.4rem 0.9rem !important;
        .left_img{
            text-align: center;
            width: 100% !important;
        }
        .right_container{
            padding-left: 0rem !important;
             padding-top: 0.2rem !important;
        }
    }
}
@media screen and (max-width: 450px){
    .container{
        padding: 0.2rem 0.1rem !important;
        .row{
            padding: 0 0 !important;
        }
    }
}

    .container{
        width: 60%;
        margin: 0 auto;
        .row{
            display: flex;
            flex-direction: column;
            padding: 0 15px;
            .entry-blog{
                flex: 1;
                display: flex;
                border-radius: 7px;
                margin: 10px;
                padding: 0.4rem;
                margin-bottom: 1rem; 
                box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
                .left_img{
                    width: 380px;
                    height: 250px;
                    text-align: center;
                    border-radius: 7px;
                    overflow: hidden;
                    transition: all 1s;
                    cursor: pointer;
                    img{
                        width: 100%;
                        height: 100%;
                        transition: all 1s;
                    }
                }
                .left_img:hover img{
                    transform: scale(1.2)
                }
                .right_container{
                    padding-left: 0.5rem;
                    flex: 1;

                    .post-content .post-header{
                        .category-meta{
                            a{
                                font-size: 0.32rem;
                                line-height: 0.8rem;
                                color: #F23051;
                                b{
                                    margin-right: 8px;
                                    font-weight: 600;
                                    font-size: 0.38rem;
                                }
                            }
                        }
                        .category-title{
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                            line-height: 1.8;
                            font-size: 0.35rem;
                            color: #32325d;
                            cursor: pointer;
                            transition: color 0.4s;
                        }
                        .category-title:hover{
                            color: #F23051;
                        }
                    }
                    .post-content .author-box{
                        
                        display: flex;
                        margin: 0.32rem 0;
                        .author_headimg{
                            width: 60px;
                            height: 60px;
                            margin-right: 0.45rem;
                            border-radius: 50%; 
                            overflow: hidden;
                            border: rgba(221, 236, 229, 0.88) solid 0.045rem;
                            img{
                                width: 100%;
                                height: 100%
                            }
                        }
                        .post_meta_content{
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            flex: 1;
                            .post_time{
                                color: #525f7f;
                                font-size: 12px;
                                b{
                                    padding-right: 0.1rem;
                                }
                            }
                            .post_author span{
                                color: #525f7f;
                                font-size: 12px;
                                text-transform: uppercase;
                                padding-right: 0.1rem; 
                                b{
                                    font-size: 13px;
                                    padding-right: 0.1rem;
                                }
                            }
                            .post_author span+span{
                                padding-left: 0.1rem; 
                                border-left: 1px solid #ccc;
                            }
                        }
                    }
                    .post-content .post_intro_text p{
                        font-size: 14px;
                        color: #8898aa;
                        line-height: 0.5rem;
                        padding-right: 9px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        /*! autoprefixer: off */ 
                        -webkit-box-orient: vertical; 
                        /*! autoprefixer: on */
                        // -webkit-box-orient: vertical;


                        // display: -webkit-box;    
                        // -webkit-box-orient: vertical;    
                        // // -webkit-line-clamp: 3;    
                        // // -webkit-box-orient: vertical;
                        // -webkit-line-clamp: 3;
                        // overflow: hidden;
                    }
                }
            }
        }
    }


</style>


